<template>
	<div class="color">
		<form action="/">
		  <van-search
		    v-model="value"
		    show-action
		    placeholder="请输入搜索关键词"
		    @search="onSearch"
		    @cancel="onCancel"
		  />
		</form>
		
		<div class="top">
			<h2>搜索历史</h2>
			<span>全部删除 完成</span>
		</div>
		<div class="sc"><van-icon name="delete-o" /></div>
		<div class="p1"><p>111</p></div>
		<div class="sctb"><van-icon name="close" /></div>
		<div class="kb"></div>
	</div>
</template>

<script>
	import { Toast } from 'vant';
	export default {
	  data() {
	    return {
	      value: '',
	    };
	  },
	  methods: {
	    onSearch(val) {
	      Toast(val);
	    },
	    onCancel() {
	      Toast('取消');
	    },
	  },
	};
</script>

<style>
	.top{
		width: 100%;
		height: 90px;
		background-color: #fff;
		margin-top: -13px;
	}
	.top h2{
		font-weight: 100;
		font-size: 15px;
		margin-left: 10px;
		margin-top: 20px;
		position: absolute;
	}
	.top span{
		margin-left: 260px;
		font-size: 15px;
		color: #bfbfbf;
		margin-top: 20px;
		position: absolute;
	}
	.sc{
		margin-left: 340px;
		margin-top: -35px;
		color: #bfbfbf;
		position: absolute;
	}
	.p1{
		background-color: #fff;
		margin-top: 2px;
		width: 100%;
		height: 50px;
		position: absolute;
	}
	.p1 p{
		margin-left: 10px;
		margin-top: 17px;
	}
	.kb{
		height: 500px;
		background-color: #f7f8fa;
	}
	.sctb{
		margin-left: 340px;
		margin-top: 20px;
		color: #bfbfbf;
	}
	.color{
		background-color: #f7f8fa;
	}
</style>